<template>
  <div class="wx">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="searchData" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="searchData.name" placeholder="请输入名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务商" prop="platform">
            <el-select v-model="searchData.platform" placeholder="请选择服务商" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in kindOptions" :key="index" :label="item.key"
                         :value="item.key" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      :data="dataList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      v-show="dataList.length > 0"
    >
      <el-table-column label="服务商名称" prop="platform" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.platform }}</span>
        </template>
      </el-table-column>
      <el-table-column label="api" prop="api" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.api }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="account" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.account }}</span>
        </template>
      </el-table-column>
      <el-table-column label="启用" prop="available" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.available }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button type="primary" @click="edit(row)">编辑</el-button>
          <el-button type="info" v-if="row.available" @click="lock(row)">锁定</el-button>
          <el-button type="primary" v-else @click="lock(row)">启用</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="searchData.totalCount > 0"
                :total="searchData.totalCount"
                :page.sync="searchData.page"
                :limit.sync="searchData.pageSize"
                @pagination="search"
    />

    <el-dialog :visible.sync="dialogVisible" :title="title">
      <el-form ref="elForm" :model="addData" :rules="addRules" size="medium" label-width="100px">
        <el-form-item label="账号" prop="account">
          <el-input v-model="addData.account" placeholder="账号" clearable
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="addData.pwd" placeholder="密码" clearable
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="api" prop="api">
          <el-input v-model="addData.api" placeholder="api接口地址" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="服务商" prop="platform">
          <el-radio-group v-model="addData.platform" size="medium">
            <el-radio v-for="(item, index) in kindOptions" :key="index" :label="item.key" :value="item.key"
                      :disabled="item.disabled">{{item.key}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用:" prop="available">
          <el-switch v-model="addData.available" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import Pagination from "@/components/Pagination";
  import {getPlatform,savePlatform} from "@/api/msg"
  import {getDict} from "@/api/dict"

  export default {
    components: {Pagination},
    data() {
      return {
        action: "",
        title: "新增短信服务商账号",
        dialogVisible: false,
        baseUrl: "",
        dataList: [],
        searchData: {
          name: undefined,
          kind: undefined,
          totalCount: 0,
          totalPage: 1,
          pageSize: 10
        },
        kindOptions: [{
          "label": "公众号",
          "value": 1
        }, {
          "label": "小程序",
          "value": 2
        }],
        addData: {
          account: undefined,
          name: undefined,
          appid: undefined,
          appsecret: undefined,
          token: undefined,
          aes_key: undefined,
          kind: 1,
          logo: null,
        },
        addRules: {
          account: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          pwd: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          api: [{
            required: true,
            message: '请输入api接口地址',
            trigger: 'blur'
          }],
          platform: [{
            required: true,
            message: '请选择服务商',
            trigger: 'blur'
          }],
        },
      };
    },
    mounted() {
    },
    watch: {},
    created() {
      this.search();
      this.baseUrl = process.env.VUE_APP_BASE_API;
      this.action = process.env.VUE_APP_BASE_API + "/file/upload";
      getDict({ key: "短信服务商" }).then(response => {
        if (response.code === 200) {
          this.kindOptions = response.page
          console.log(this.kindOptions);
        }
      });
    },
    methods: {
      lock(row) {
        row.available = !row.available
        savePlatform(row).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "warn",
            });
          }
        })
      },
      handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          savePlatform(this.addData).then(response => {
            if (response.code === 200) {
              this.$message({
                showClose: true,
                message: response.msg,
                type: "success",
              });
              this.dialogVisible = false;
              this.search();
            }
          })
        })
      },
      beforeAvatarUpload(file) {
        // 关键点注入用户凭证
        this.$refs.upload.headers.Authorization = this.$store.getters.token;
        console.log(this.$refs.upload.headers);
        const isJPG = file.type === "image/jpeg";
        const isPng = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPng) {
          this.$message.error("上传头像图片只能是 JPG 或 png 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return (isJPG || isPng) && isLt2M;
      },
      handleAvatarSuccess(res, f) {
        //this.form.imageUrl = URL.createObjectURL(f.raw)
        this.addData.imageUrl = res.file;
        this.addData.logo = res.file;
      },
      add() {
        this.title = "新增微信应用";
        this.dialogVisible = true;
        this.addData = {
          account: undefined,
          name: undefined,
          appid: undefined,
          appsecret: undefined,
          token: undefined,
          aes_key: undefined,
          kind: 1,
          logo: null,
        }
      },
      edit(row) {
        this.title = "编辑微信应用";
        this.dialogVisible = true;
        this.addData = row;
      },
      onClose() {
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.dialogVisible = false
        this.addData = {
          account: undefined,
          name: undefined,
          appid: undefined,
          appsecret: undefined,
          token: undefined,
          aes_key: undefined,
          kind: 1,
          logo: null,
        }
      },
      search() {
        getPlatform(this.searchData).then(response => {
          if (response.code === 200) {
            this.dataList = response.page.list;
            this.searchData.page = response.page.currPage;
            this.searchData.totalPage = response.page.totalPage;
            this.searchData.totalCount = response.page.totalCount;
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  };
</script>


<style lang="scss">

  .wx {
    margin-top: 20px;
    .avatar-uploader {
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
      }
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 100%;
      display: block;
      max-width: 178px;
    }
    .el-dialog {
      margin-top: 0px !important;
    }
    .el-dialog__body {
      padding-top: 5px !important;
      padding-bottom: 0px !important;
    }
  }

</style>
